<template>
  <div class="user-detail">
    <!-- 导航栏 -->
    <van-nav-bar
      title="用户详情"
      left-text="返回"
      left-arrow
      @click-left="goBack"
    />
    
    <!-- 用户详情 -->
    <div class="profile">
      <!-- 用户头像 -->
      <div class="avatar">
        <img :src="user.pic" alt="用户头像" />
      </div>
      <!-- 用户基本信息 -->
      <div class="info">
        <van-cell title="姓名" :value="user.name" />
        <van-cell title="性别" :value="user.sex" />
        <van-cell title="学院" :value="user.faculty" />
        <van-cell title="学号" :value="user.studentId" />
        <van-cell title="电话" :value="user.phone" />
        <van-cell title="邮箱" :value="user.email" />
        <van-cell title="地址" :value="user.address" />
        <van-cell title="入学年份" :value="user.enrollmentYear" />
      </div>
    </div>
  </div>
</template>

<script>
import organizerApi from "@/api/organizerProfile.js";
export default {
  data() {
    return {
      user: {
        id: 0,
        name: "",
        pic: "",
        sex: "",
        phone: "",
        email: "",
        address: "",
        studentId: "",
        enrollmentYear: "",
        faculty: "",
      },
    };
  },
  mounted() {
    // 获取用户ID（从路由传递）
    const userId = this.$route.query.id;
    this.fetchUserProfile(userId);
  },
  methods: {
    fetchUserProfile(id) {
      organizerApi.getUserProfile(id).then((res) => {
        this.user = res;
      });
    },
    goBack() {
      this.$router.go(-1); // 返回上一个页面
    },
  },
};
</script>

<style scoped>
.van-nav-bar ::v-deep .van-nav-bar__text,
.van-nav-bar ::v-deep .van-nav-bar__title {
  color: white !important;
}

.van-nav-bar ::v-deep .van-nav-bar__arrow{
  color: white !important;
}
.user-detail {
  font-family: Arial, sans-serif;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  box-sizing: border-box;
}

/* 导航栏样式 */
.van-nav-bar {
  height: 8vh;
  line-height: 8vh;
  font-size: 2.5vh;
  background-color: #007bff;  /* 蓝色底色 */
  color: white;               /* 标题文字为白色 */
}

/* 用户头像 */
.avatar {
  margin: 5vh auto;
  width: 25vw;
  height: 25vw;
  max-width: 120px;
  max-height: 120px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0.5vh 1vh rgba(0, 0, 0, 0.1);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 用户信息 */
.info {
  margin: 2vh 5%;
  background-color: #f9f9f9;  /* 背景色 */
  border-radius: 8px;          /* 边框圆角 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 内容凸出的阴影 */
  padding: 2vh 3%;             /* 内边距 */
}

.van-cell {
  margin-bottom: 2vh;
}

/* 响应式设计 */
@media (max-width: 600px) {
  .avatar {
    margin: 5vh auto;
    width: 40vw;
    height: 40vw;
    max-width: 80px;
    max-height: 80px;
  }

  .van-nav-bar {
    font-size: 4vw;
  }

  .info {
    margin: 2vh 3%;
  }

  .van-cell {
    font-size: 4vw;
  }
}

@media (max-width: 375px) {
  .van-nav-bar {
    font-size: 5vw;
  }

  .info {
    margin: 2vh 2%;
  }

  .avatar {
    width: 45vw;
    height: 45vw;
    max-width: 70px;
    max-height: 70px;
  }

  .van-cell {
    font-size: 3.5vw;
  }
}
</style>
